<template>
	<view>
		
		<!-- 轮播图 -->
		<view class="homeSwiper flex align-center justify-center">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<image class="w100 h100 s-img" src="/static/test/rb.jpeg"></image>
				</swiper-item>
				<swiper-item>
					<image class="w100 h100 s-img" src="/static/test/rb.jpeg"></image>
				</swiper-item>
				<swiper-item>
					<image class="w100 h100 s-img" src="/static/test/rb.jpeg"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 文本内容 -->
		<view class="goods-text">
			
			<view class="g-price flex">
				<view class="item1 flex-sub flex justify-start align-center">
					<text class="text1">
						￥188
					</text>
					<text class="text2">
						￥228
					</text>
				</view>
				<view class="item2 flex-sub">
					已团266件
				</view>
			</view>
			
			<view class="title">
				【仅限深圳同城地区】新鲜水果上市 大荔冬枣  5斤/箱 枣香枣脆 等你抢购【商品名称】
			</view>
			
			<view class="title-text">
				享有“南荔枝，北冬枣，百果王”的盛名。
				状如苹果，有“小苹果”之称。
				果皮赭红光亮、皮薄肉脆、甘甜清香、
				营养丰富，可食率达95%。
			</view>
			
			<view class="table-num">
				<view class="num-title flex">
					<view class="t-item1">
						团购人数
					</view>
					<view class="t-item2">
						2人团
					</view>
					<view class="t-item3">
						3人团
					</view>
					<view class="t-item4">
						4人团
					</view>
				</view>
				<view class="num-text flex">
					<view class="t-item1">
						团购价格
					</view>
					<view class="t-item2">
						￥66
					</view>
					<view class="t-item3">
						￥66
					</view>
					<view class="t-item4">
						￥66
					</view>
					
				</view>
				
			</view>
			
			<!-- 正品保证，包退包换， -->
			<view class="guarantee flex justify-start align-center">
				
				<view class="item flex justify-start align-center">
					<image class="w36 h36" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						正品保证
					</text>
				</view>
				<view class="item flex justify-start align-center">
					<image class="w36 h36" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						坏果包赔
					</text>
				</view>
				<view class="item flex justify-start align-center">
					<image class="w36 h36" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						24小时退换
					</text>
				</view>
				<image class="icon-img" src="/static/store/jiantouyou.png"></image>
			</view>
			
			
		</view>
		
		<!-- 支付开团并邀请4人参团，人数不足自动退款 -->
		<view class="tip1">
			支付开团并邀请4人参团，人数不足自动退款
		</view>
		<view class="tip2">
			以下小伙伴正在发起团购，您可以直接参与
		</view>
		
		<view class="avatar flex align-center justify-center">
			
			<view class="item flex relative">
				<image class="a-img" src="/static/test/rb.jpeg"></image>
				
				<view class="item1">
					
					<view class="text1 flex align-center justify-between">
						<text>
							不知道先生
						</text>
						<text>
							还差2人成团
						</text>
					</view>
					<view class="text2 flex align-center justify-between">
						<text>
							广州
						</text>
						<text>
							剩余12：12：12结束
						</text>
					</view>
					
				</view>
				<view class="item2 flex align-center justify-center" @click="jumpGroup">
					<text class="text">
						去参团
					</text>
					<image class="w36 h36" src="/static/store/jiantou.png"></image>
				</view>
				
			</view>
			
		</view>
		
		<!-- 用户评价 -->
		<view class="commet-title flex align-center justify-between" @click="jump('orderList')">
			<view class="item1">
				用户评价
			</view>
			<view class="item2 flex justify-start align-center">
				<text class="text">
					共10条评论
				</text>
				<image class="img" src="/static/store/jiantouyou.png"></image>
			</view>
		</view>
		
		<view class="c-item" v-for="(item,index) in 2" :key="index">
			<view class="item-title flex justify-start align-center">
				<image class="avatar" src="/static/test/rb.jpeg"></image>
				<view class="text">
					<view class="item">
						不知道先生
					</view>
					<view class="item">
						20:20:20 12:12:12
					</view>
				</view>
				<view class="star">
					
				</view>
			</view>
			<view class="comment-text">
				这次买的水果真心不错，
				推荐各位购买！
				下次还会继续关注购买！
			</view>
			
			<view class="commment-type">
				规格:中等果
			</view>
		</view>
		
		
		<!-- 商品详情 -->
		<view class="commet-title flex align-center justify-between" style="border:none;">
			<view class="item1">
				商品详情
			</view>
		</view>
		<view class="detailImg">
			<image class="img" src="/static/test/rb.jpeg" mode="aspectFill"></image>
			
		</view>
	
		
		<view style="width:750rpx;height:600rpx;"></view>
		
		<!-- 底部btn -->
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="goods-btn flex justify-start align-center">
				<view class="item1 flex align-center flex-direction">
					<image class="w36 h36 btn-img" src="/static/homePage/bangdan-check.png"></image>
					<text class="btn-text">
						首页
					</text>
				</view>
				<view class="item1 flex align-center flex-direction">
					<image class="w36 h36 btn-img" src="/static/homePage/bangdan-check.png"></image>
					<text class="btn-text">
						收藏
					</text>
				</view>
				<view class="item1 flex align-center flex-direction">
					<image class="w36 h36 btn-img" src="/static/homePage/bangdan-check.png"></image>
					<text class="btn-text">
						客服
					</text>
				</view>
				<view class="item4" @click="jumpBuy">
					<view class="text">
						$99.55
					</view>
					<view class="text">
						单独购买
					</view>
				</view>
				<view class="item5">
					<view class="text">
						$99.55
					</view>
					<view class="text">
						2-4人团
					</view>
				</view>
				
			</view>
		</view>
		


	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

			};
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			jumpBuy(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.pelletizing.shoppingProcess,
					query: {
						a: 1
					}
				})
			},
			jumpGroup(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.pelletizing.groupDetails,
					query: {
						a: 1
					}
				})
			}





		}
	}
</script>

<style lang="scss">
	.goods-btn{
		width:750rpx;
		height:100rpx;
		background-color: white;
		.item1{
			flex:1;
			padding-top: 16rpx;
			.btn-img{
				
			}
			.btn-text{
				margin-top: 8rpx;
				font-size: 24rpx;
			}
		}
		
		.item4{
			flex:2;
			background-color: pink;
			padding:10rpx 0;
			.text{
				line-height: 40rpx;
				text-align: center;
				color:white;
			}
		}
		.item5{
			flex:2;
			background: #d4237a;
			padding:10rpx 0;
			.text{
				line-height: 40rpx;
				text-align: center;
				color:white;
			}
		}
	}
	
	// 商品详情
	.detailImg{
		width:750rpx;
		.img{
			width:100%;
		}
	}
	// 评论列表
	.c-item{
		width:750rpx;
		padding:0 32rpx;
		.item-title{
			width:100%;
			height:100rpx;
			.avatar{
				width:80rpx;
				height:80rpx;
				border-radius: 50%;
			}
			.text{
				flex:1;
				padding: 0 20rpx;
				color:#999999;
			}
			.star{
				width:200rpx;
				height:100rpx;
				border:1rpx solid red;
			}
			
		}
		
		.comment-text{
			width:100%;
			margin-top: 16rpx;
			font-size: 30rpx;
			line-height: 50rpx;
		}
		.commment-type{
			width:100%;
			margin-top: 16rpx;
			font-size: 30rpx;
			line-height: 80rpx;
			color:#999999;
			border-bottom: 1rpx solid #eee;
		}
	}
	
	// 用户评价
	.commet-title{
		width:750rpx;
		height:88rpx;
		padding:0 32rpx;
		border-bottom: 1rpx solid #eee;
		.item2{
			font-size: 28rpx;
			color: #bfc8ce;
			.text{
				margin-right: 10rpx;
			}
			.img{
				width:28rpx;
				height:32rpx;
			}
			
		}
	}
	
	
	// 轮播图
	.homeSwiper {
		width: 750rpx;
		height: 360rpx;
	
		.swiper {
			width: 750rpx;
			height: 360rpx;
		}
	}
	
	.avatar{
		width:750rpx;
		height:120rpx;
		background-color: #eee;
		.item{
			width:680rpx;
			height:90rpx;
			border-radius: 56rpx;
			border:1rpx solid #bbbfbf;
			.item1{
				flex:5;
				height:90rpx;
				padding-left:100rpx;
				padding-right:20rpx;
				.text1{
					line-height: 45rpx;
					font-size: 24rpx;
					color:#838686;
				}
				.text2{
					line-height: 45rpx;
					font-size: 24rpx;
					color:#838686;
				}
			}
			.item2{
				flex:2;
				padding-left:24rpx;
				height:90rpx;
				background: #d4237a;
				border-radius: 36rpx;
				.text{
					font-size: 28rpx;
					color:white;
					margin-right: 8rpx;
				}
			}
			
			.a-img{
				width:90rpx;
				height:90rpx;
				border-radius: 50%;
				position: absolute;
				left:0;
				top:0;
			}
		}
	}
	
	.tip1{
		width:750rpx;
		height:80rpx;
		line-height: 80rpx;
		padding:0 32rpx;
		background-color: pink;
		color:white;
		font-size: 30rpx;
	}
	.tip2{
		width:750rpx;
		height:80rpx;
		line-height: 80rpx;
		padding:0 32rpx;
		background-color: #d4237a;
		color:white;
		font-size: 30rpx;
	}
	
	.goods-text{
		width:750rpx;
		padding:32rpx;
		.g-price{
			width:100%;
			height:60rpx;
			.item1{
				.text1{
					font-size: 36rpx;
					margin-right: 16rpx;
					color:#d4237a;
				}
				.text2{
					font-size: 30rpx;
					text-decoration:Line-through;
				}
			}
			.item2{
				text-align: right;
				line-height: 60rpx;
			}
		}
		
		.title{
			font-size: 32rpx;
			font-weight: bold;
			line-height: 50rpx;
		}
		.title-text{
			font-size: 28rpx;
			line-height: 40rpx;
			margin-top: 16rpx;
		}
		
		.table-num{
			width:100%;
			padding:0 24rpx;
			margin-top: 24rpx;
			.num-title{
				heihgt:60rpx;
				view{
					flex:1;
					heihgt:60rpx;
					line-height: 60rpx;
					text-align: center;
					border:1rpx solid #eee;
				}
			}
			.num-text{
				heihgt:60rpx;
				view{
					flex:1;
					heihgt:60rpx;
					line-height: 60rpx;
					text-align: center;
					border:1rpx solid #eee;
				}
			}
		}
		
		.guarantee{
			width:100%;
			height:110rpx;
			border-bottom: 1rpx solid #eee;
			.item{
				flex:1;
				.text{
					margin-left:8rpx;
					font-size: 28rpx;
					color:#999999;
				}
			}
			.icon-img{
				width:24rpx;
				height:32rpx;
			}
			
		}
	}
	

	
	
</style>
